import { defineComponent, ref } from "vue";
import styles from "./safetyDetail.module.less";
import { imgPath } from "@/common/utils";
export default defineComponent({
  name: "safetyDetail",
  setup() {
    const state = ref({
      headData: {
        headImageName: imgPath("/safetyDetail/service.png"),
        serviceItem: imgPath("/safetyDetail/serviceItems.png"),
        bodyImageName: imgPath("/safetyDetail/safe_1.63db4cd.png"),
        bottomText:
          "自2017年开始，中联金安作为第三方专业力量，积极发挥行业风险管理专家的职能，在全国范围内为各级文化和旅游行业管理部门、文化和旅游企事业单位提供隐患排查/安全检查、风险评估、应急预案及应急演练辅导、 安全管理体系建设、双控建设、安全培训、安全标准规范制定等服务，获得客户好评。",
      },
      serviceItemlist: [
        {
          imageName: imgPath("/safetyDetail/safe_group_1.30391ac.png"),
          label:
            "接受行管部门或企事业单位委托，按照法律法规和标准规范要求，对文旅企事业单位实施安全隐患排查并提出整改建议。",
        },
        {
          imageName: imgPath("/safetyDetail/safe_group_2.0d4932c.png"),
          label:
            "接受行管部门或企事业单位委托，通过现场查勘访谈，结合历年安全事件数据进行安全风险辨识、分析与评估，提出风险分级应对策略与风险管理建议。",
        },
        {
          imageName: imgPath("/safetyDetail/safe_group_3.68ad07a.png"),
          label:
            "接受行管部门或企事业单位委托，通过现场查勘访谈，结合历年安全事件数据进行安全风险辨识、分析与评估，提出风险分级应对策略与风险管理建议。",
        },
        {
          imageName: imgPath("/safetyDetail/safe_group_4.549a223.png"),
          label:
            "接受行管部门或企事业单位委托，通过现场查勘、访谈与资料收集，开展风险分析、应急资源调查、梳理应急组织体系，形成风险调研报告，编制突发事件应急预案。",
        },
        {
          imageName: imgPath("/safetyDetail/safe_group_5.2626eac.png"),
          label:
            "接受文旅企事业单位委托，进行现场查勘、访谈、分析现有安全管理制度，根据适用的法律法规、监管部门要求和单位本身现状，梳理需要修订完善、新增的管理制度清单，健全并完善安全生产标准化制度，建立标准一致、形式统一的文件与记录表，并进行培训宣贯。",
        },
        {
          imageName: imgPath("/safetyDetail/safe_group_6.0ae0733.png"),
          label:
            "接受行管部门委托，制定暗访方案，以消费者身份对当地文化和旅游市场进行“体验式”暗访，将暗访档案、拍摄视频、照片等进行问题梳理汇总，最后编制暗访评估报告、制作暗访视频。",
        },
        {
          imageName: imgPath("/safetyDetail/safe_group_7.b9c3eb1.png"),
          label:
            "接受行业主管部门委托，协助制定文旅行业双重预防机制建设实施方案和通则，各产业链主体实施指南/指导手册和考评规定。 接受文旅企事业单位委托，指导开展危险源辨识/风险评估/风险分级管控、隐患排查治理闭环管控，形成相关实物技术成果。",
        },
        {
          imageName: imgPath("/safetyDetail/safe_group_8.4b2c9f5.png"),
          label:
            "接受行管部门委托，组织专家开展行业安全监管、风险认知、应急救援等相关专项服务成果的技术交流培训，强化行业安全共识。\n接受文旅企事业单位委托，组织专家开展企业安全管理、风险评估、隐患排查、应急预案等专题培训，协助企业落实安全生产主体责任。",
        },
        {
          imageName: imgPath("/safetyDetail/safe_group_9.2765033.png"),
          label:
            "接受行管部门委托，协助制定文旅产业链主体行业安全生产管理操作指引、安全标准和管理规范，指导企事业单位落实安全生产主体责任。",
        },
      ],
    });
    const HeadBox = () => (
      <div class={styles.headBox}>
        <div class={styles.head}>
          <img src={state.value.headData.headImageName} />
        </div>
        <div class={styles.body}>
          <img src={state.value.headData.bodyImageName} />
        </div>
        <div class={styles.bottom}>
          <span>{state.value.headData.bottomText}</span>
        </div>
      </div>
    );
    const ServiceItem = () => (
      <div class={styles.serviceItem}>
        <div class={styles["serviceItem_head"]}>
          <img src={state.value.headData.serviceItem} />
        </div>
        <div class={styles["serviceItem_content"]}>
          {
            state.value.serviceItemlist.map((item: any, index: any) => {
              return <div class={styles["serviceItem_box"]}>
                <div class={styles["serviceItem_infoBox"]}>
                  <img src={item.imageName}></img>
                  <div class={styles["serviceItem_cardBox"]}>
                    <div class={styles["serviceItem_labelBox"]}>
                     {item.label}
                    </div>
                  </div>
                </div>
                <div class={styles["serviceItem_shadow"]}>
                  <div class={styles["serviceItem_shadow_label"]}>
                    {item.label}
                  </div>
                </div>
              </div>
            })
          }
        </div>
      </div>
    );

    return () => (
      <div class={styles.safetyDetailBox}>
        <div class={styles.safetyDetailContent}>
          <HeadBox />
          <ServiceItem />
        </div>
      </div>
    );
  },
});
